<template>
  <div class="per">
    <Row class="margin-bottom-20 search">
      <Col span="2">
        <span class="middle-32 label">消息类型：</span>
      </Col>
      <Col span="4">
      <Select v-model="messageArgs.search.msgType" clearable >
        <Option v-for="item in messageStatus" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      </Col>
      <Col span="2">
      <span class="middle-32 label">消息主题：</span>
      </Col>
      <Col span="4">
        <!--<Input placeholder="请输入消息主题" clearable v-model="messageArgs.search.topic"/>-->
        <Select v-model="messageArgs.search.id" clearable filterable placeholder="请选择消息主题" style="width:300px;">
          <Option v-for="item in this.searchTb" :value="item.key" :key="item.key">{{ item.label }}</Option>
        </Select>
      </Col>
      <Col span="2">
      <span class="middle-32 label">状态：</span>
      </Col>
      <Col span="4">
      <Select v-model="messageArgs.search.status" clearable>
        <Option v-for="item in lookStatus" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      </Col>
      <Col span="2" offset="2">
      <Button type="primary" @click="getMessagee">查询</Button>
      </Col>
    </Row>
    <div>
      <div style="padding-bottom: 50px;">
        <Form :label-width="80">
          <div class="editModal margin-bottom-20" >
            <Table border :columns="messageColumns" :data="messageDatas" @on-selection-change="selectPersTables" @on-row-click="clickMessage"></Table>
          </div>
          <div>
            <Page :total="total" :current="currentPage" size="small" show-elevator show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
          </div>
        </Form>
      </div>
     <!-- <Tabs value="name1" :animated="false">
        <TabPane label="已收消息" name="name1">
          <div style="padding-bottom: 50px;">
            <Form :label-width="80">
              <div class="editModal margin-bottom-20" >
                <Table border :columns="messageColumns" :data="messageDatas" @on-selection-change="selectPersTables"></Table>
              </div>
              <div>
                <Page :total="total" :current="currentPage" size="small" show-elevator show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
              </div>
            </Form>
          </div>
        </TabPane>
        <Button type="ghost" @click="openDeleteModal" style="margin-right: 30px;" size="small" slot="extra">批量删除</Button>
        <Button type="ghost" @click="sendMessage" size="small" slot="extra">发信息</Button>
        <TabPane label="已删消息" name="name2">
          <div style="padding-bottom: 50px;">
            <Form :label-width="80">
              <div class="editModal margin-bottom-20" >
                <Table border ></Table>
              </div>
              <div>
                <Page size="small" show-elevator show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
              </div>
            </Form>
          </div>
        </TabPane>
      </Tabs>-->
    </div>
    <Spin size="large" fix v-if="spinShow">加载中...</Spin>
  </div>
</template>

<script>
    import { getMessageApi , deletePerApi } from '../../http/message.api'
    export default {
        name: 'Setting',
        data () {
            return {
                spinShow: false,
                total: 0,
                searchTb: [],
                // 查询条件
                messageArgs: {
                    search: {
                        topic: '', //主题
                        msgType: '', //类型
                        status: '', //状态
                        recipient: localStorage.getItem('userName'), //收件人
                    },
                    pageReqired: true,
                    limit: 10,
                    offset: 10,            // 偏移量
                    sort: 'createTime',   // 排序的字段
                    order: 'desc',        // asc 升序 desc 降序
                },
                messageArgss: {
                    search: {
                        topic: '', //主题
                        msgType: '', //类型
                        status: '', //状态
                        recipient: localStorage.getItem('userName'), //收件人
                    },
                    pageReqired: true,
                    limit: 10000,
                    offset: 10000,            // 偏移量
                    sort: 'createTime',   // 排序的字段
                    order: 'desc',        // asc 升序 desc 降序
                },
                selectPers: [], // 删除时选中的多条权限
                selPer: {}, // 编辑时选中的一条权限,
                currentPage: 1, // 当前页
                isItems: false,
                messageStatus: [
                    {
                        value: 'system',
                        label: '系统消息'
                    },
                    {
                        value: 'user',
                        label: '用户消息'
                    }
                ],
                lookStatus: [
                {
                    value: 'END',
                    label: '已读'
                },
                {
                    value: 'OPEN',
                    label: '未读'
                }
            ],
                // 角色key
                messageColumns: [
                    /*{
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },*/
                    {
                        title: '发件人',
                        key: 'sender',
                        align:'center',
                        width: 400,
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: (params.row.status==='OPEN')&&'email-unread'||'email',
                                        size:'18',
                                        color:(params.row.status==='OPEN')&&'#3091f2'||'#ccc'
                                    }
                                }) ,
                                h('strong', params.row.sender)
                            ]);
                        }
                    },
                    {
                        title: '消息主题',
                        align:'center',
                        key: 'topic'
                    },
                    {
                        title: '时间',
                        width: 400,
                        align:'center',
                        key: 'createTime',
                        /*sortable: true,
                        sortType:'desc',*/
                        render: (h, params) => {
                            if(!(params.row.createTime)){
                                return h('div', '')
                            }else {
                                var text = this.$moment(params.row.createTime).format('YYYY-MM-DD hh:mm:ss')
                                return h('div', text)
                            }
                        }
                    }
                ],
                // 角色列表
                messageDatas: []
            }
        },
        watch: {
            /*'editRelatePeople' (val) {
                if (val) {
                    /!* console.log("this.perInfo.id====="+this.perInfo.id)*!/
                    this.editRelateFrom = JSON.parse(JSON.stringify(this.perInfo))
                }
            }*/
        },
        created () {
            this.getMessage()
            this.getMessages()
            /*console.log(" selPer.row.id666==="+JSON.stringify(this.perInfo))*/
            //人员列表
            //editRelateApi (resp.data.rows.map(item => item.id),this.selPer).then(suc => {

            //    console.log("suc"+suc)
            //})
        },
        methods: {
            hasButtonPermission(permission) {
                return this.$store.getters['login/hasButtonPermission'](permission);
            },
            getMessagee(){
                this.pageChanges(1)
                this.getMessage ()
            },
            sendMessage(){
                this.$router.push({ path: '/sendMessage'})
            },
            // 查询权限列表
            getMessage () {
                //this.spinShow = true
                this.messageArgs.offset = (this.currentPage - 1) * this.messageArgs.limit
                const search = this.messageArgs.search
                search.topic ? null :  delete search.topic
                search.msgType ? null :  delete search.msgType
                this.messageArgs.search = search
                getMessageApi(this.messageArgs).then(resp => {
                    console.log(resp)
                    this.messageDatas = resp.data.rows
                   /* resp.data.rows.map(list => {

                    })*/
                    this.total = resp.data.total
                    console.log("this.total====="+this.total)
                    this.spinShow = false
                }).catch(err => {
                    console.log("err= "+err)
                    this.$Message.error("错误代码【"+err.data.code+"】，"+err.data.message)
                    this.spinShow = false
                })
            },
            getMessages () {
                this.messageArgss.offset = (this.currentPage - 1) * this.messageArgss.limit
                const search = this.messageArgss.search
                search.topic ? null :  delete search.topic
                search.msgType ? null :  delete search.msgType
                this.messageArgss.search = search
                getMessageApi(this.messageArgss).then(resp => {

                    resp.data.rows.map(ip => {
                        this.searchTb.push({
                            key: ip.id,
                            label: ip.topic
                        })
                    })
                    this.spinShow = false
                }).catch(err => {
                    console.log("err= "+err)
                    this.$Message.error("错误代码【"+err.data.code+"】，"+err.data.message)
                    this.spinShow = false
                })
            },
            // 选中
            selectPersTables (arr) {
                this.selectPers = arr
            },
            //点击单行
            clickMessage(rows,i){
                 //this.$Message.error("rows====="+JSON.stringify(rows)+"i==="+i)
                 deletePerApi(rows).then(suc => {
                     console.log("rows.status========="+rows.status)
                     this.getMessage()
                     this.$Message.info('已读');
                 }).catch(err => {
                     this.$Message.error("错误代码【"+err.data.code+"】，"+err.data.message)
                     this.spinShow = false
                 })

            },
            // 切换页码
            pageChange (n) {
                this.currentPage = n
                this.getMessage()
            },
            // 切换页码1
            pageChanges (n) {
                this.currentPage = n
            },
            // 切换每页显示数量
            pageSizeChange (n) {
                this.messageArgs.limit = n
                this.getMessage()
            },
            // 删除多条
            deleteMorePer () {
                this.spinShow = true
                if (this.selectPers.length === 0) return
                Promise.all(this.selectPers.map(per => {
                    deletePerApi(per)
                    this.getMessage()
                })).then(suc => {
                    console.log(suc)
                    this.getMessage()
                    this.$Modal.remove()
                    this.spinShow = false
                }).catch(err => {
                    this.$Message.error("错误代码【"+err.data.code+"】，"+err.data.message)
                    this.$Modal.remove()
                    this.spinShow = false
                })
            },
            // 打开多删弹出框
            openDeleteModal (index) {
                if (this.selectPers.length === 0) {
                    this.$Message.config({
                        top: 260,
                        duration: 4
                    });
                    this.$Message.info('请勾选左边的复选框');
                    return
                }
                console.log("this.lengths==="+this.lengths)
                this.selPer = this.selectPers[0]
                this.$Modal.confirm({
                    title: '删除权限',
                    content: `<h4>说明:确定删除选中权限?</h4>`,
                    loading: true,
                    onOk: () => {
                        this.spinShow = true
                        this.deleteMorePer()
                        this.getMessage()
                        this.spinShow = false
                    },
                    onCancel: () => {
                    }
                })
            }
        }
    }
</script>
<style scoped>
  .demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
  }

  .demo-upload-list img {
    width: 100%;
    height: 100%;
  }

  .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }

  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }

  .ivu-icon {
    line-height: 58px;
  }
 .search  .label {
    line-height: 32px;
    float: right;
 }
  .middle-32 {
    display: inline-block;
    height: 32px;
    line-height: 32px;
  }
</style>
